<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX实现基本布局</title>
    <style>
        html, body{
            width: 100%;
            height: 100%;
            padding: 0; 
            margin: 0;
            box-sizing: border-box;
            font-size: 16px;
        }
        body{
            padding: 0 20px 0 20px;
        }
        *{
            font-family: Arial, Helvetica, sans-serif;
        }
        .container{
            display: flex;
            flex-direction: column;
            max-width: 900px;
            margin: 0 auto;
        }
        header{
            border-bottom: 1px solid #3399FF;
            font-size: 1.5rem;
            padding: 0 10px 0 10px;
        }
        header>nav{
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        header>nav>ul{
            display: flex;
            list-style: none;
            color: gray;
            padding: 0;
        }
        header>nav>ul>li{
            margin-right: 10px;
        }
        header>nav>ul>li>a:link, header>nav>ul>li>a:visited, header>nav>ul>li>a:hover, header>nav>ul>li>a:active{
            color: gray;
            text-decoration: none;
        }
        header>nav>button, header>nav>button:focus{
            cursor: pointer;
            color: white;
            background-color: #39F;
            border-radius: 1.5rem;
            padding: 0 15px 0 15px;
            font-size: 1.5rem;
            height: 3rem;
            line-height: 3rem;
            border: none !important;
            outline: none !important;
        }
        header>nav>button:hover{
            background-color: #3AF;
        }
        .wrapper{
            display: flex;
            flex-direction: row;
            padding-top: 30px;
        }
        .sidebar{
            flex: 1;
            border-top: 5px solid #330033;
            background-color: #EEE;
            padding: 10px;
        }
        .main{
            flex: 3;
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .main img{
            align-self: center;
        }
        .main h2{
            color: #39F;
        }
        footer{
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #555;
            margin-top: 20px;
        }
        footer>h3{
            color: white;
        }

    </style>
</head>
<body>
    <div class="container">
        <header>
            <nav>
                <ul>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
                <button>Login</button>
            </nav>
        </header>
        <div class="wrapper">
            <div class="sidebar">
                <h2>Recent Posts</h2>
                <p>Post One</p>
                <p>Post Two</p>
                <p>Post Three</p>
            </div>
            <section class="main">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3101289799,2486141640&fm=27&gp=0.jpg" alt="">
                <h2>Flexbox Layout</h2>
                <p>Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. </p>
                <p>Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. </p>
            </section>
        </div>
        <footer>
            <h3>Flexbox Layout Example</h3>
            <p>XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        </footer>
    </div>
    
</body>
</html>